<template>
    <uni-badge size="small" :text="badge" absolute="rightTop">
        <view class="bang-tab-bar-item" @tap="itemClick">
            <view class="bang-tabbar-item__icon">
                <slot name="icon">
                    <up-icon v-if="icon" :name="icon" :size="iconSize" :color="_iconColor"/>
                </slot>
            </view>
            <text v-if="isNotEmpty(text)" class="bang-tabbar-item__text" :style="textStyle">
                {{ text }}
            </text>
        </view>
    </uni-badge>
</template>

<script setup>
import {isNotEmpty} from '@/qly/verificate'
import {useStore} from '@/qly/helper/pinia-auto-refs'

const {checkedItem, setCheckedItem} = useStore('tabbar')
const props = defineProps({
    name: {
        type: String,
        default: null
    },
    text: {
        type: String,
        default: null
    },
    icon: {
        type: String,
        default: null
    },
    iconSize: {
        type: [String, Number],
        default: '28'
    },
    badge: {
        type: [String, Number],
        default: 0
    },
    iconColor: {
        type: String,
        default: 'rgb(125, 126, 128)'
    }
})
const checked = ref(false)
const _iconColor = computed(() => {
    if (checked.value) {
        return 'rgb(25, 137, 250)'
    } else {
        return props.iconColor
    }
})
const textStyle = computed(() => {
    if (checked.value) {
        return {'color': 'rgb(25, 137, 250)'}
    } else {
        return {'color': 'rgb(125, 126, 128)'}
    }
})

watch(() => checkedItem.value, () => {
    checked.value = props.name == checkedItem.value
}, {immediate: true})

// 点击事件
function itemClick() {
    setCheckedItem(props.name)
}
</script>

<style scoped>
.bang-tab-bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 100%;
    cursor: pointer;
}

.bang-tab-bar-item .bang-tabbar-item__icon {
    display: flex;
    flex-direction: row;
    position: relative;
    width: 100%;
    justify-content: center;
}

.bang-tab-bar-item .bang-tabbar-item__text {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    margin-top: 2px;
    font-size: 14px;
    color: rgb(125, 126, 128);
}
</style>
